import { FC, useEffect, useState, useContext } from 'react';
import HeaderBar from './headerCom';
import { useSearchParams } from 'react-router-dom';
import { getQuestionDetail, type QUESTIONTYPE } from '@/request';
import ReactHtmlParser from 'react-html-parser';
import { WrapContext } from './wrap';

const Question: FC = () => {
  const [URLSearchParams] = useSearchParams();
  const problem_id = URLSearchParams.get('problem_id');
  const [data, setData] = useState<QUESTIONTYPE['data'] | null>(null);
  const context = useContext(WrapContext);
  useEffect(() => {
    if (problem_id) {
      getQuestionDetail({ problemId: problem_id }).then((res) => {
        if (!res.error) {
          setData(res.data);
          context?.setQuestionDetail(res.data);
        }
      });
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [problem_id, context?.setQuestionDetail]);
  return (
    <div className='flex flex-col rounded-large grow shrink basis-1 overflow-auto border-[#DADADA] rounded-[8px] border'>
      <HeaderBar
        title='题目描述'
        path={new URL('@/assets/imgs/icon-question.png', import.meta.url).href}
      />
      {data && (
        <div className='bg-white grow shrink-0 basis-1 pt-[19px] pl-[22px] pr-[22px] pb-[22px] overflow-auto'>
          <div className='text-[18px] mb-[22px]'>{data.title}</div>
          <div className='text-[14px]'>{ReactHtmlParser(data.description)}</div>
          <div className='mt-[40px] text-[16px]'>
            <div className='mb-[8px]'>
              <span className='font-semibold'>输入:</span>
              {ReactHtmlParser(data.input_description)}
            </div>
            <div>
              <span className='font-semibold'>输出:</span>
              {ReactHtmlParser(data.output_description)}
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default Question;
